<template>
  <div id="orders" :class="styleTypeClass" :style="{width,height:'100%'}">
    <!-- 默认样式-->
    <template>
      <div class="mt-3" style="height:95%">
        <EchartsIndex :options="options"/>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin/index'
import mixinEcharts  from '../mixin/echarts'
export default {
  name: "Users",
  mixins: [mixin,mixinEcharts],
  components: {},
  data(){
    return {
      series0Value:0,
      options:{
        grid: {
          left: '20%',
          top: '0',
          right: '20%',
          bottom: '0'
        },
        "xAxis": {
          type: 'value',
          "splitLine": {
            "show": false
          },
          "axisLine": {
            "show": false
          },
          "axisLabel": {
            "show": false
          },
          "axisTick": {
            "show": false
          }
        },
        "yAxis": [{
          "type": "category",
          "inverse": false,
          "data": [],
          "axisLine": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          "axisLabel": {
            show: false
          }
        }],
        "series": [
          {
            type: 'pictorialBar',
            data: [68363],
            itemStyle: {
              normal: {
                color: '#09c4ca'
              }
            },
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolSize: [0.5 * 25, 25],
            symbol: 'roundRect',
            label: {
              show: true,
              position: 'left',
              formatter: function () {
                return '好评'
              },
              color: '#fff',
              fontSize: 0.7 * 25,
            },
            z: 1000
          },
          {
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: '#0700fd'
              }
            },
            data: [65000],
            animationDuration: 0,
            symbolRepeat: 'fixed',
            // symbolMargin: '20%',
            symbol: 'roundRect',
            symbolSize: [0.5 * 25, 25],
            label: {
              show: true,
              position: 'right',
              formatter: function () {
                // return Math.floor(52563 * 100 / 65000) + '%'
                return '差评'
              },
              color: '#fff',
              fontSize: 0.7 * 25,
            }
          }
        ]
      }
    }
  },
  props:{
    //ele, val, con, max, color
    //'.shoeChart', 52563, '完成率', 65000, '#09c4ca'
    // w:{
    //   type: Number,
    //   default: 25
    // },
    // ele:{
    //   type: String,
    //   default: 'shoeChart'
    // },
    val:{
      type: Number,
      default: 52563
    },
    // con:{
    //   type: String,
    //   default: '完成率'
    // },
    // max:{
    //   type: Number,
    //   default: 65000
    // },
    // color:{
    //   type: String,
    //   default: '#09c4ca'
    // },
  },
  computed:{},
  methods: {
    valTest(){
      console.log('this.val === ',this.val)
      // this.series0Value = this.val;
      // console.log('this.series0Value === ',this.series0Value)
    },
  },
  watch:{
    dynamicData: {
      deep: true,
      handler() {
        this.valTest();
      }
    },

  },
}
</script>

<style lang="scss" scoped>
//@import '@/styles/datav/infoPlatform.scss';
</style>
